<template>
    <div>
        <Modal v-model="value" :mask-closable='false' :closable="false" :width="960" >
            <Spin fix size="large" v-if="submitLoading">
                <slot name="loading"/>
            </Spin>
            <Form ref="searchForm" inline :label-width="85">
                <Form-item label="人员账号" prop="username">
                    <Input type="text" v-model="searchForm.userName" clearable placeholder="请输入人员账号"
                           style="width: 150px"/>
                </Form-item>
                <Form-item label="在岗状态" prop="postStatus">
                    <Select v-model="searchForm.postStatus" clearable placeholder="请选择在岗状态"
                            style="width: 150px">
                        <Option value="1">在岗</Option>
                        <Option value="0">离岗</Option>
                    </Select>
                </Form-item>
                <Form-item>
                    <Button type="primary" @click="search">查询</Button>
                </Form-item>
            </Form>
            <Table :columns="columns" :data="dataList" border ref="taskHandlerGroup" :height="400"
                   closeable="false " :loading="loading">
                <template slot-scope="{row}" slot="action">
                    <Button type="primary" @click="changeHandler(row)">选择</Button>
                </template>
            </Table>
            <Page :total="total" show-elevator :style="{textAlign:'right',marginTop:'10px'}"
                @on-change="changePage" show-total />
            <div slot="header">
                <h2> {{currentOperationType.title}}</h2>
            </div>
            <div slot="footer">
                <Button type="primary" @click="cancel" ghost>关闭</Button>
            </div>
        </Modal>
        <Span v-if="queryFlag"/>
    </div>
</template>

<script>
    import {getUserDetailsInfo} from "@/projects/afs-core-business/api/afs-case/parameter-rules/group";
    export default {
        name: "task-handler",
        props: {
            value: {
                type: [Boolean, String],
                default: false
            },
            taskNodeIdProp: {
                type: [String],
                default: ''
            },
            operationType:{
                type:String,
                default: "1"
            },
            stageId: "",
            taskOriUserName: "",
            applyNo:""
        },
        data() {
            return {
                loading: false,
                dataList: [],
                columns: [
                    {
                        title: "人员账号",
                        key: "username",
                        minWidth: 100,
                        align: "center"
                    },
                    {
                        title: "人员姓名",
                        key: "userRealName",
                        minWidth: 100,
                        align: "center"
                    },
                    {
                        title: "在岗状态",
                        key: "postStatus",
                        minWidth: 100,
                        align: "center",
                        render: (h, params) => {
                            let text = '';
                            let color = '';
                            let arr = params.row.postStatus;
                            if(arr==="0"){
                                text = '离岗';
                            }else if(arr==="1"){
                                text = '在岗';
                                color = 'lightgreen';
                            }else{
                                text = '离岗';
                            }
                            return h('Tag', {
                                    props: {
                                        type:"dot",
                                        color: color
                                    }
                                },
                                text,
                            )
                        }
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 80,
                        align: "center",
                        fixed: "right",
                        slot: "action",
                        className: 'select-table-info-column'
                    }
                ],
                userNameCondition: "",
                postStatusCondition: "",
                currentUserName:"",
                currentStatus:"",
                submitLoading: false,
                dataTotal: 0,
                queryResult: {
                    pageList: [],
                    allDataList: [],
                    dataTotal: 0
                },
                total:0,
                pageSize: 10,
                operationTypeConst:{
                    change:{
                        val:"1",
                        title:"任务改派"
                    },
                    appoint:{
                        val:"2",
                        title:"指定处理人"
                    }
                },
                currentOperationType:{},
                searchForm: {
                    username: "",
                    deptId: "",
                    phone: "",
                    userEmail: "",
                    lockFlag: "",
                    pageNumber: 1,
                    pageSize: 10,
                    startDate: "",
                    endDate: "",
                    userRealName:"",
                    postStatus:"",
                    userName:"",
                    approvalAuthority:"01",
                },
            }
        },
        methods: {
            cancel() {
                this.$emit("cancel");
            },
            listByDepartment() {
                getUserDetailsInfo(this.searchForm).then(res=>{
                    if(res.code === "0000"){
                        this.dataList = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            changeHandler(row) {
                this.$emit("afterSubmit", row);
            },
            search(){
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.listByDepartment();
            },
            changePage(v){
                this.searchForm.pageNumber = v;
                this.listByDepartment();
            }
        },
        computed: {
            queryFlag: function () {
                this.listByDepartment();
            },
        },
    }
</script>
